<template>
  <div class="content">
    <el-row class="grid-content bg-purple-dark">
      <el-col :span="1">
        <span class="el-icon-search" style="margin-top: 15px;"></span>
      </el-col>
      <el-col :span="2" style="margin-top: 10px;">
        筛选查询
      </el-col>
      <el-col :span="12">
        创建时间
        <el-date-picker v-model="defectCondition.createStarttime" @change="changeStartTime" type="date" placeholder="开始日期"
          :picker-options="pickerOptions0">
        </el-date-picker>
        <el-date-picker v-model="defectCondition.createndtime" @change="changeEndTime" type="date" placeholder="结束日期"
          :picker-options="pickerOptions1">
        </el-date-picker>
      </el-col>
      <el-col :span="3" style="margin-top: 5px;margin-bottom: 5px;">
        <el-select v-model="defectCondition.projectId" clearable @clear="clearProjectId" placeholder="请选择项目" style="width: 120px;">
          <el-option v-for="project in projects" :key="project.projectId" :label="project.projectName"
            :value="project.projectId">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="1" style="margin-top: 5px;margin-bottom: 5px;">
        <el-button @click="getDefectConditionByChoice()" size="small">查询</el-button>
      </el-col>
    </el-row>



    <el-table
        :data="defectStatement"
        border
        style="width: 1280px;">
        <el-table-column
          prop="defectId"
          label="缺陷编号"
          width="55"
        text-align: center>
        </el-table-column>
        <el-table-column
          prop="defectName"
          label="缺陷名称"
          width="100">
        </el-table-column>
        <el-table-column
          prop="projectName"
          label="项目名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="priority"
          label="优先级"
          width="120">
        </el-table-column>
        <el-table-column
          prop="serverity"
          label="严重程度"
          width="120">
        </el-table-column>
        <el-table-column
          prop="defectType"
          label="缺陷分类"
          width="120">
        </el-table-column>
        <el-table-column
          prop="defectStateName"
          label="缺陷状态"
          width="120">
        </el-table-column>
        <el-table-column
          prop="defectChoiceName"
          label="指派给"
          width="120">
        </el-table-column>
        <el-table-column
          prop="forwardEndtime"
          label="计划完成时间"
          width="120">
        </el-table-column>
        <el-table-column
          prop="defectChangetime"
          label="更新时间"
          width="160">
        </el-table-column>
        <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="responseDefect(scope.row)" type="text" size="small">反馈</el-button>
                <el-button @click="removeDefect(scope.row)" type="text" size="small" v-if="scope.row.defectStateId!=states[1].defectstateId">关闭</el-button>
              </template>
        </el-table-column>
      </el-table>


      <el-dialog
        title="缺陷信息"
        :visible.sync="dialogVisibleDefectMessage"
        width="50%"
        hight="100%"
        :before-close="handleClose">
        <el-descriptions title="缺陷信息" border :column=2>
            <el-descriptions-item label="项目名称">{{defectStatementMessage.projectName}}</el-descriptions-item>
            <el-descriptions-item label="缺陷名称">{{defectStatementMessage.defectName}}</el-descriptions-item>
            <el-descriptions-item label="缺陷分类">{{defectStatementMessage.defectType}}</el-descriptions-item>
            <el-descriptions-item label="缺陷状态">{{defectStatementMessage.defectStateName}}</el-descriptions-item>
            <el-descriptions-item label="严重程度">{{defectStatementMessage.serverity}}</el-descriptions-item>
            <el-descriptions-item label="优先级">{{defectStatementMessage.priority}}</el-descriptions-item>
            <el-descriptions-item label="预计开始">{{defectStatementMessage.forwardStarttime}}</el-descriptions-item>
            <el-descriptions-item label="预计结束">{{defectStatementMessage.forwardEndtime}}</el-descriptions-item>
            <el-descriptions-item label="完成率">{{defectStatementMessage.defectCompletionRate}}</el-descriptions-item>
            <el-descriptions-item label="预计工时">{{defectStatementMessage.fowardWorkHours}}</el-descriptions-item>
            <el-descriptions-item label="缺陷描述" :span=24>{{defectStatementMessage.defectDescription}}</el-descriptions-item>
            <el-descriptions-item label="缺陷要求">{{defectStatementMessage.filesDescribe}}</el-descriptions-item>
        </el-descriptions>
        <el-table
            :data="defectResponseMessage"
            border

            style="width: 401px;">
            <el-table-column
              prop="responseComments"
              label="反馈信息"
              width="200"
            text-align: center>
            </el-table-column>
            <el-table-column
              prop="responseCreatetime"
              label="反馈时间"
              width="200">
            </el-table-column>
          </el-table>
        <div class="demo-image__preview">
          <el-image
            style="width: 300px; height: 200px" v-for="(item,index) in defectStatementMessage.imgs" :key="index"
            :src="item" >
          </el-image>
        </div>
        <el-form ref="form" :model="defectResponse" label-width="80px">
          <el-form-item label="状态" prop="defectStateId" style="width: 262px;">
            <el-select v-model="defectResponse.defectStateId" placeholder="请选择状态" style="width: 120px;">
              <el-option v-for="defectstate in defectstates" :key="defectstate.defectstateId"
                :label="defectstate.defectstateName" :value="defectstate.defectstateId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="反馈信息" prop="responseComments" style="width: 262px;">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入反馈内容"
              v-model="defectResponse.responseComments">
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleDefectMessage = false">取 消</el-button>
          <el-button type="primary" @click="isResponse">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions0: {
          disabledDate: (time) => {
            if (this.defectCondition.createndtime != "" && this.defectCondition.createndtime != null) {
              return this.defectCondition.createndtime.getTime() < time.getTime();
            } else {
              return false;
            }
          }
        },
        pickerOptions1: {
          disabledDate: (time) => {
            if (this.defectCondition.createStarttime != '' && this.defectCondition.createStarttime !=
              null) {
              return time.getTime() < this.defectCondition.createStarttime.getTime();
            } else {
              return false;
            }

          }
        },
        defectCondition: {
          uid:null,
          defectCreatStarttime: null,
          defectCreatendtime: null,
          projectName: null,
          projectId: null,
          createStarttime:null,
          createndtime:null,
        },
        projects: [],
        defectStatement:[],
        defectStatementMessage:{},
        dialogVisibleDefectMessage:false,
        defectstates:[],
        defectResponseMessage:[],
        defectResponse:{
          defectStateId:null,
          defectStateName:null,
          defectId:null,
          responseComments:null
        },
        states:[],
        defectstateId2:''
      }
    },
    methods: {
      handleCurrentChange(val){
        this.ProjectPage.pageNum=val
        this.getAllProject()
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      getNoNewDefectByMyProject() {
        var user=JSON.parse(sessionStorage.getItem("user"))
        this.defectCondition.uid=user.uid
        this.$axios.post("/defect/getNoNewDefectByMyProject",this.defectCondition).then(resp=>{
          console.log(resp)
          this.defectStatement=resp.data.data
        })
      },
      clearProjectId(){
        this.defectCondition.projectId=null
      },
      changeStartTime(){
        if(this.defectCondition.createStarttime==null){
          this.defectCondition.defectCreatStarttime=null
        }
      },
      changeEndTime(){
        if(this.defectCondition.createndtime==null){
          this.defectCondition.defectCreatendtime=null
        }
      },
      getDefectConditionByChoice(){
        var user=JSON.parse(sessionStorage.getItem("user"))
        this.defectCondition.uid=user.uid
        if(this.defectCondition.createStarttime!=null&&this.defectCondition.createndtime!=null){
          this.defectCondition.defectCreatStarttime=this.getDateFormat(this.defectCondition.createStarttime)
          this.defectCondition.defectCreatendtime=this.getDateFormat(this.defectCondition.createndtime)
          this.$axios.post("/defect/getNoNewDefectByMyProject",this.defectCondition).then(resp=>{
            this.defectStatement=resp.data.data
            this.defectCondition.createStarttime=null
            this.defectCondition.createndtime=null
            this.defectCondition.defectCreatStarttime=null
            this.defectCondition.defectCreatendtime=null
            this.defectCondition.defectStateId=null
            this.defectCondition.projectId=null
          })
        }else if(this.defectCondition.createStarttime==null&&this.defectCondition.createndtime==null){
          this.$axios.post("/defect/getNoNewDefectByMyProject",this.defectCondition).then(resp=>{
            if(resp.data.flag){
              this.defectStatement=resp.data.data
              this.defectCondition.createStarttime=null
              this.defectCondition.createndtime=null
              this.defectCondition.defectCreatStarttime=null
              this.defectCondition.defectCreatendtime=null
              this.defectCondition.defectStateId=null
              this.defectCondition.projectId=null

            }

          })
        }else{
          this.$message({
                    message: '请选择完整的时间范围',
                    type: 'warning'
                  });
        }

      },
      getDateFormat(mydate){
        var year=mydate.getYear()+1900
        var day=mydate.getDate()+""
        var month=mydate.getMonth()+1+""
        if(month.length==1){
          month="0"+month
        }
        if(day.length==1){
          day="0"+day
        }
        var time=""+year+"-"+month+"-"+day
        return time;
      },
      getMyProjectName(){
        var user=JSON.parse(sessionStorage.getItem("user"))
        this.$axios.get("/project/getMyProjectName/"+user.uid).then(resp=>{
          console.log(resp)
          this.projects=resp.data.data
        })
      },
      responseDefect(defect){
        console.log(defect)
        this.defectStatementMessage=defect
        this.defectResponse.defectId=defect.defectId
        this.defectResponse.defectStateId=defect.defectStateId
        // this.defectResponse.defectStateName=defect.defectStateName
        // this.defectResponse.defectStateId=defect.defectStateId
        this.$axios.post("/defectstate/getDefectNoInitState").then(resp=>{
          this.defectstates=resp.data.data
        })
        this.$axios.get("/response/getResponse/"+defect.defectId).then(resp=>{
          this.defectResponseMessage=resp.data.data
        })
        this.dialogVisibleDefectMessage=true
      },
      getdefectState() {
        this.$axios.post("/defectstate/getdefectStateIsOk").then(resp => {
          this.states = resp.data.data
          this.defectstateId2==this.states[1].defectstateId
          console.log(this.states)
        })
      },
      isResponse(){
        if(this.defectResponse.responseComments==''||this.defectResponse.responseComments==null){
          this.$message({
                    message: '请输入反馈信息',
                    type: 'warning'
                  });
          return
        }
        if(this.defectResponse.defectStateId!=null){
          for(var i=0;i<this.defectstates.length;i++){
            if(this.defectResponse.defectStateId==this.defectstates[i].defectstateId){
              this.defectResponse.defectStateName=this.defectstates[i].defectstateName
            }
          }
        }
        this.$axios.post("/defect/responseDefect",this.defectResponse).then(resp=>{
          if(resp.data.flag){
            this.$message({
                      message: '反馈成功',
                      type: 'success'
                    });
            this.getNoNewDefectByMyProject()
            this.defectResponse.defectStateId=null
            this.defectResponse.defectId=null
            this.defectResponse.defectStateName=null
            this.defectResponse.responseComments=null
          }
        })
        this.dialogVisibleDefectMessage=false
      },
      removeDefect(defect){
        this.$axios.get("/defect/removeDefect/"+defect.defectId).then(resp=>{
          if(resp.data.flag){
            this.getNoNewDefectByMyProject()
          }
        })
      }
    },
    created() {
      this.getdefectState()
      this.getNoNewDefectByMyProject()
      this.getMyProjectName()
    }
  }
</script>

<style>
  .el-icon-search {

    left: -1060px;
  }

  .top_button {
    background-color: #F2F2F2;
    text-align: right;
  }
</style>
